<template>
  <div class="maincss deviceList">
    <el-card class="mainItem dtitle apparatus-card ">
<!--      <searchBox title='仪器管理' :btn='btn' @func='showBtn'/>-->
      <el-row class="searchbox">
        <el-col span="1"> 室内质控 </el-col>
        <el-col span="3">
          <el-input
            placeholder="仪器编号"
            v-model="queryParams.instrumentNo"
          >
          </el-input>
        </el-col>
        <el-col span="3">
          <el-input
            placeholder="仪器名称"
            v-model="queryParams.instrumentName"
          >
          </el-input>
        </el-col>
        <el-col span="1">
          <el-button @click="handleLoadAndQuery" type="primary">查询</el-button>
        </el-col>
        <el-col span="2">
          <el-button @click="handleOpenAdd" type="primary">新增</el-button>
        </el-col>
      </el-row>
      <div class="apparatus-list">
        <div class="list" v-for="item in deviceList" :key="item.index" @click='toDeviceInfo(item.id)'>
          <div class="title-img">
            <div class="cell-title"><p class="tit">{{ item.instrumentName }}</p></div>
          </div>
          <div class="text">
            <p>{{ item.instrumentNo }}</p>
            <p>{{ item.instrumentModel }}</p>
          </div>
          <div class="foot">
            <div class="cell-left">
              <i :class="'icon iconfont icon-wifi ' +item.connet"></i>
              <i class="icon iconfont icon-shequyujing red"></i>
              <i class="icon iconfont icon-015suo-4 gray"></i>
              <i class="icon iconfont icon-chaxun orange"></i>
            </div>
            <div class="cell-right"><i class="icon iconfont icon-yuandianzhong green"></i></div>
          </div>
        </div><!---list--->

      </div>
    </el-card>

    <el-drawer
      title="新增室内质控"
      :visible.sync="addShow"
      size='65%'
    >
      <addindoor @func='showRegister'/>
    </el-drawer>
  </div>
</template>

<script>
import addindoor from "./addindoor";
import {listInstrument, getInstrument} from "@/api/business/instrument"

export default {
  name: "device",
  components: {
    addindoor
  },
  data() {
    return {
      btn: {
        add: false,
        reg: true,
        down: false,
        export: true,
        imp: false,
        info: true,
        search: true
      },
      sel: {},
      deviceList: [],
      redirect: undefined,
      registerShow: false,
      total: 10,
      queryParams: {
        pageNum: 1,
        pageSize: 1000,
        instrumentNo: '',
        instrumentName: ''
      }
    };
  },
  watch: {},
  created() {
    this.handleLoadAndQuery()
  },
  methods: {
    showBtn(data) {
      if (data == 'add') {
        this.handleOpenAdd()
      }if (data === 'search') {
        this.handleLoadAndQuery()
      }
    },
    handleOpenAdd() {
      this.registerShow = true
    },
    handleCloseAdd() {
      this.registerShow = false
      this.handleLoadAndQuery()
    },
    handleLoadAndQuery() {
      listInstrument(this.queryParams).then((res) => {
        res.rows.forEach((item) => {
          item.connet = 'green'
        })
        this.deviceList = res.rows
      })
    },
    toDeviceInfo(id) {
      this.$router.push({path: "/device/deviceInfo/index?id=" + id});
    }
  }
};
</script>
